<template>
  <el-dialog title="新增/编辑档案" :visible.sync="innerVisible"
             :close-on-click-modal="false"
             custom-class="dialog-archive">
    <el-form :model="form">
      <el-form-item label="档案类别" :label-width="formLabelWidth">
        <el-radio v-model="form.type" label="Qing">清朝档案</el-radio>
        <el-radio v-model="form.type" label="POC">民国档案</el-radio>
      </el-form-item>
      <el-form-item label="全宗名称" :label-width="formLabelWidth">
        <el-input v-model="form.fullname" size="small" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="年度" :label-width="formLabelWidth">
        <el-date-picker v-model="form.year" type="year" placeholder="选择年"></el-date-picker>
      </el-form-item>
      <el-form-item label="保管期限" :label-width="formLabelWidth">
        <el-input v-model="form.keepDate" size="small" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="盒号" :label-width="formLabelWidth">
        <el-input v-model="form.boxNo" size="small" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="件号" :label-width="formLabelWidth">
        <el-input v-model="form.unitNo" size="small" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="题名" :label-width="formLabelWidth">
        <el-input v-model="form.title" size="small" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="责任人" :label-width="formLabelWidth">
        <el-input v-model="form.liablePerson" size="small" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="时间" :label-width="formLabelWidth">
        <el-input v-model="form.time" size="small" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="页数" :label-width="formLabelWidth">
        <el-input-number v-model="form.pageCount" :min="1"
                         controls-position="right"></el-input-number>
      </el-form-item>
      <el-form-item label="密级" :label-width="formLabelWidth">
        <el-input v-model="form.secretLevel" size="small" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="form.remark" size="small" auto-complete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="innerVisible = false" size="small">取 消</el-button>
      <el-button type="primary" @click="submit" size="small"
                 :disabled="submitDisabled">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import ElInputNumber from '../../../../node_modules/element-ui/packages/input-number/src/input-number'
  export default {
    components: {ElInputNumber},
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      formData: Object
    },

    data() {
      return {
        innerVisible: this.visible,
        form: {
          ...this.formData,
          addDate: this.formData.addDate || new Date().getTime()
        },
        formLabelWidth: '80px',
        submitDisabled: false
      }
    },

    methods: {
      submit() {
        console.log(this.form, this.form._id)
        let formData = this.form

        // 数据处理
        if (formData.year instanceof Date) {
          formData.year = formData.year.getFullYear()
        }

        if (formData._id) { // edit
          this.$db.update({ _id: formData._id }, { $set: formData }, {},
            (err, newDoc) => {
              if (err) {
                this.$message.error('更新失败')
                return
              }

              console.log(newDoc)
              this.$message.success({
                message: '更新成功',
                duration: 1000,
                onClose: () => {
                  this.innerVisible = false
                  this.$emit('submitSuccess')
                }
              })
            })
        } else { // add
          delete formData._id
          this.$db.insert(formData, (err, newDoc) => {
            if (err) {
              this.$message.error('添加失败')
              return
            }

            console.log(newDoc)
            this.submitDisabled = true
            this.$message.success({
              message: '添加成功',
              duration: 1000,
              onClose: () => {
                this.innerVisible = false
                this.submitDisabled = false
                this.$emit('submitSuccess')
              }
            })
          })
        }
      }
    },

    watch: {
      visible(val) {
        this.$emit('update:visible', val)
        console.log(val)

        if (val) {
          this.innerVisible = val
        }
      },
      innerVisible (val) {
        this.$emit('update:visible', val)
      },
      formData(val) {
        if (val) {
          this.form = val
        }
      }
    }
  }
</script>

<style lang="less">
  .dialog-archive {
    width: 500px;

    .el-input--small {
      width: 300px;
    }
  }
</style>
